<!--
 * @Author: yansheng 610363806@qq.com
 * @Date: 2024-07-26 21:07:35
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:42:16
 * @FilePath: \cell-admin\src\pages\user\list\rebateList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      title="积分日志"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :keyboard="false"
      @close="visible = false"
      width="800"
      v-model:open="visible"
    >
      <a-range-picker
        :format="'YYYY-MM-DD'"
        @change="onChange"
        @ok="onOk"
      />

      <a-table
        :row-key="(record) => record.uid"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        @change="handleTableChange"
        :pagination="
          isObject(pagination)
            ? {
                showQuickJumper: true,
                total: pagination.total,
                current: pagination.current,
                pageSize: pagination.pageSize,
                showTotal: (total) => `共计 ${pagination.total} 条`
              }
            : false
        "
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'Admin'">
            <!-- userInfo -->
            <template v-if="record.Admin">
            <div
              class="user-info"
              v-if="record.Admin && record.Admin.avatar"
            >
              <img
                class="user-info-avatar"
                style=""
                :src="record.Admin.avatar"
                alt=""
              />
              <div class="user-name">
                <div class="name">{{ record.Admin.admin_name }}</div>
              </div>
            </div>
          </template>
          <template v-else>

            <div
              class="user-info"
              
            >
              <img
                class="user-info-avatar"
                style=""
                :src="userInfo.avatar"
                alt=""
              />
              <div class="user-name">
                <div class="name">{{ userInfo.user_name }}</div>
                <div class="phone">{{ userInfo.phone }}</div>
              </div>
            </div>
          </template>
          </template>
          <template v-if="column.dataIndex === 'operator_id'">
            <span
              v-if="record.remove_point"
              style="color: red"
            >
              - {{ record.remove_point }}
            </span>
            <span
              v-if="record.add_point"
              style="color: green"
            >
              + {{ record.add_point }}
            </span>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <a @click="goDetail(record)">详情</a>
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script setup>
  import { message } from 'ant-design-vue'

  import { getRecordLogList } from '@/api/index.js'

  import { isObject } from 'lodash-es'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  const showAddDialog = ref(false)
  const visible = ref(false)
  const loading = ref(false)
  const columns = [
  {
      title: '操作人',
      dataIndex: 'Admin'
    },
    {
      title: '操作积分',
      dataIndex: 'operator_id'
    },

    {
      title: '剩余积分',
      dataIndex: 'current_point'
    },
    {
      title: '备注',
      dataIndex: 'remark'
    },
    
    {
      title: '创建时间',
      dataIndex: 'created_at'
    }
  ]
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    start_time: '',
    end_time: '',
    total: 0
  })

  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  const uid = ref('')
  const rebateLogDetailEle = ref(null)
  const goDetail = (row) => {
    rebateLogDetailEle.value.init(row)
  }
  const timeArr = ref([])
  const onOk = () => {
    getList()
  }
  const onChange = (value, dateString) => {
    console.log('Selected Time: ', value)
    console.log('Formatted Selected Time: ', dateString)
    timeArr.value = dateString
    getList()
  }
  const tableData = ref([])
  const getList = () => {
    loading.value = true
    let params = {
      uid: uid.value,
      page: pagination.current,
      pageSize: pagination.pageSize
    }
    if (timeArr.value.length > 0&&!['',null,undefined].includes( timeArr.value[0])) {
      ;(params.start_time = timeArr.value[0] + ' 00:00:00'), (params.end_time = timeArr.value[1] + ' 23:59:59')
    } else {
    }

    getRecordLogList({
      ...params
    })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg)
          return
        }
        tableData.value = res.data
        pagination.total = res.total
      })
      .catch((err) => {
        message.error(err.msg)
      })
      .finally(() => {
        loading.value = false
      })
  }
const userInfo = ref(null)
  const init = (userId,user) => {
    uid.value = userId
    userInfo.value = user
    getList()
    visible.value = true
  }

  defineExpose({
    init
  })
</script>
<style scoped lang="less">
  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
